/** useRef */
import React, { useState, useRef } from 'react'

export default function HookRef() {

  let [img, setImg] = useState("")

  let headerRef = useRef(null)
  let [header, setHeader] = useState("")

  const changeHeader = () => {
    console.log(headerRef, "获取ref对象")
    setHeader(headerRef.current.files[0])
    // 读取到二进制文件对象，用户上传头像业务中需要的数据
    console.log(headerRef.current.files[0], "用户选择头像")
  }

  return (
    <div>
      <h3>5. useRef</h3>
      <div>
        <h5>① 普通变量操作文件域</h5>
        {/* 表单数据双向绑定 */}
        <input type="file" name="file" id="file"
          value={img}
          onChange={e => setImg(e.target.value)} />
        <hr />
        用户选择头像：{img}
        {/* 默认请款下直接双向绑定数据，获取到头像的字符串路径 */}
        {/* 期望：获取头像二进制文件；实际：获取字符串数据 */}
      </div>
      <hr />
      <div>
        <h5>② ref操作文件域</h5>
        <input type="file" name="header" id="header"
          ref={headerRef}
          onChange={changeHeader} />
      </div>
    </div>
  )
}
